
// 这样有两个不好,
// 1. 限制死了用户的使用方式, 想全局就全局, 想局部就局部
// 2. 限制死了用户一定要用, 希望是用户想用的时候自己注册

// 场景: 我现在希望把所有的指令们 都注册成全局...

// 注册全局 自定义指令  <img v-imgerror="imgSrc" />  imgSrc: 'xxx.xx'
export const imgerror = {
  // 指令的钩子函数...
  inserted(el, binding) {
    // el => 指令所在的dom元素
    // binding.value => 指令的值
    // 指令所在的dom元素插入到页面时执行...
    console.log('进入页面了', el, binding.value)
    // 希望在图片加载失败时(error), 有个默认图片展示
    // img.onload = function() {}
    el.onerror = function() {
      // 只有图片加载失败时, 才会执行
      el.src = binding.value
    }
  }
}

// 需求: 希望有一个 v-color
// 用法: <span v-color="color">哈哈哈</span>  color: 'red'
export const color = {
  inserted(el, binding) {
    el.style.color = binding.value
  }
}
